<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
		body
		{
			margin:0;
			padding:0;
		}
		
		#main
		{
			border:1px dotted #ff0000;
			width:500px;
			margin:50px;
		}
		
		#container
		{
			width:400px;
			height:400px;
			position:absolute;
			left:150px;
			top:100px;
			
			border:1px dotted #ff0000;
		}
		#rect
		{
			width:100px;
			height:100px;
			border:10px solid #ff0000;
			background-color:#FFFFFF;
			position:absolute;
			
			left:100px;
			top:100px;
			
		
			overflow:auto;
			min-width:100px;
			min-height:100px;
			max-width:300px;
			max-height:300px;
			-webkit-user-select:none;
		}
		
		#info
		{
			left:550px;
			position:absolute;
			border:1px solid #ff0000;
		
			background-color:#FFFFFF;
			
		}
	
	</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
	var $rect;
	var $info;
	var $container;
	
	function onMove(e){
		var strInfo="";
		
		var offsetX = e.offsetX||(parseInt(e.pageX)-parseInt($rect.offset().left));   //firefox = e.offsetX => undefined
		var offsetY = e.offsetY||(parseInt(e.pageY)-parseInt($rect.offset().top));
		//alert($rect.offset().left);
		strInfo = 	"rect.clientX="+e.clientX+"  -->브라우저 기준 x<br>";
		strInfo += "rect.clientY="+e.clientY+" -->브라우저 기준 Y<br>";
		strInfo += 	"rect.pageX="+e.pageX+"  -->브라우저 기준 스크롤된 부분 포함<br>";
		strInfo += "rect.pageY="+e.pageY+" -->브라우저 기준 스크롤된 부분 포함<br>";
		strInfo		+="rect.offsetX = "+offsetX+"   --> 엘리먼트 내에서의 위치<br>";
		strInfo		+="rect.offsetY = "+offsetY+"   --> 엘리먼트 내에서의 위치<br>";
		strInfo		+="screenX = "+e.screenX+" -->모니터상 위치<br>";
		strInfo		+="screenY = "+e.screenY+" -->모니터상 위치<br>";
		
		$info.html(strInfo);
		
	}
window.onload=function(e){
	$rect = $("#rect");
	$info = $("#info");
	$container = $("#container");
	
	$rect.bind("mousemove",onMove);
			
	
}
</script>
</head>
<body>
<div id="info"> 		   
		</div>
<div id="container">
		
		<div id="rect"> 
			1<br>
			2<br>    
			3<br>    
			4<br>                     
		</div>
	</div>
</body>
</html>